<template>
    <div class="bigBox">
        <div class="left inp" 
        v-for="(item,index) in InpList" 
        :key="'info1-'+index">
            <div class="left txt1" v-if="isTitle">{{item.title}}</div>
            <div class="left"> 
                <el-input 
                v-model="item.model" 
                :placeholder="item.text" 
                size="small" 
                clearable></el-input>
            </div>
            <div class="clear"></div>
        </div>
       <div class="left selt" 
       v-show="selList" 
       v-for="(items,index) in selList" 
       :key="'info2-'+index">
            <div class="left txt1" v-if="isTitle">{{items.tit}}</div>
            <div class="left">
                <el-select 
                    :multiple="isMultiple" 
                    v-model="items.value" 
                    :placeholder="items.title" 
                    size="small" 
                    @change="selFn(index)">
                        <el-option
                        v-for="item in items.options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        >
                        </el-option>
                </el-select>
            </div>
            <div class="clear"></div>
            
       </div>
        <div class="left btn" v-for="(item,index) in BtnList" :key="index">
            <el-button type="primary" 
            size="small" @click="clickFn(index)">
            <span :class="item.icon"></span>{{item.name}}</el-button>
        </div>
        <div class="clear"></div>
    </div> 
</template>
<script>
export default {
    name:'SupInput',
    data(){
        return{
        }
    },
    props:{
        //输入框
        InpList:{
            type:Array,
            default:()=>[]
        },
        //按钮
        BtnList:{
            type:Array,
            default:()=>[]
        },
        // 下拉框
        selList:{
            type:[],
            default:()=>[]
        },
        isMultiple:{
            type:Boolean,
            default:()=>true
        },
        isTitle:{
            type:Boolean,
            default:()=>false
        }
    },
    methods:{
        clickFn(index){
            let _self = this;
            _self.$emit('clickFn',index)
        },
        selFn(index){
            let _self = this; 
            _self.$emit('selFn',index)
        }
    }
}
</script>
<style scoped>
.left{
    float: left;
}
.right{
    float: right;
}
.clear{
    clear: both;
}
.txt1{
    line-height: 32px;
    margin-right: 10px;
    width: 80px;
}
.inp{
    margin-right: 20px;
    margin-bottom: 20px;
}
.selt{
    margin-right: 20px;
    margin-bottom: 20px;
}
.btn{
    margin-left: 20px;
    margin-bottom: 20px;
}
</style>